import { Form, Input, Button, NumberKeyboard, PasscodeInput, Space, Toast } from 'antd-mobile'
import loginStyle from "@/css/login.module.css"
import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from "react-redux";
const Login = () => {
    const dispatch=useDispatch();
    const {userInfo}=useSelector(d=>d.user)
    //登录手机号
    const [phone, setPhone] = useState();
    //手机号/验证码 页面切换
    const [isShow, setShow] = useState(true);
    //用于密码输入错误提示
    const [error, setError] = useState(false);

    const [num, setNum] = useState(0);

    //子组件
    const Login = (props) => {
        const smsfocus = useRef(null);
        const [smsTime, setTime] = useState(59);
        useEffect(() => {
            const interval = setInterval(() => {
                setTime(smsTime - 1);
                if (smsTime <= 1) {
                    setShow(true);
                    Toast.show({
                        content: '请重新获取验证码',
                        afterClose: () => {
                            console.log('after')
                        },
                    })
                }
                smsfocus.current.focus();
            }, 1000)

            return () => {
                clearInterval(interval);
            }
        }, [isShow, smsTime]);


            //验证码改变事件
    const onChange = (value) => {
        if (value.length==6 && value === "888888") {
            Toast.show("正确")
        } else if(value.length==6 && value !== "888888"){
            Toast.show("验证码有误");
        }

        // let test=new Promise((resolve,reject)=>{
        //     return resolve("这是正确答案")
        // });
        // test.then((res)=>{
        //        console.log(res);
        // }).then((res)=>{
        //     console.log(res,"fjwewgkw");
        // }).then((res)=>{
        //     console.log(res);
        // })

    }


        return <div className={loginStyle["smsContainer"]}>
            <div>请输入验证码</div>
            <div>
                <span className={loginStyle["promptprompt"]}>已发送至</span>
                <span>{phone.substring(0, 3)}</span> <span>{phone.substring(3, 7)}</span> <span>{phone.substring(7, 11)}</span></div>
            <div className={loginStyle["sms"]}>
                <PasscodeInput
                    ref={smsfocus}
                    seperated
                    length={6}
                    plain
                    caret={false}
                    onChange={onChange}
                    className={loginStyle["smsInput"]}

                />
                <div className={loginStyle["timeprompt"]}>
                    重新发送({smsTime}s)
                </div>
            </div>

        </div>

    }

     
    //点击发送验证码 显示输入登录验证码事件
    const getSms = (props) => {
        var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        console.log(props);
        if (props.length < 11) {
            Toast.show("请输入正确的手机号");
            return false
        } else if (!reg_tel.test(props)) {
            Toast.show("请输入正确的手机号");
            return false;
        }
        setShow(false);
    }

    

    //父组件
    return <>
        <div className={loginStyle["LoginContainer"]}>
            {isShow && <div>
                <div className={loginStyle["head"]}>
                    <div className={loginStyle["shop-logo"]}>小杨优选</div>
                    <p className={loginStyle["shop-title"]}>小杨优选</p>
                    <p className={loginStyle["shop-remark"]}>一家有温度的社区电商</p>
                </div>

                <div className={loginStyle["logins"]}>
                    <input type="text" placeholder='请输入手机号'
                    onChange={(e) => setPhone(e.target.value)} className={loginStyle["phone"]} />
                    <Button block className={loginStyle["sms-btn"]} color='danger' shape='rounded' onClick={() => getSms(phone)}>发送验证码</Button>




                </div>
            </div>}

            {!isShow && <Login></Login>}
        </div>
    </>
}



export default Login